<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Social Media Mapper</title>

<link href="jquery.loadmask.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.loadmask.min.js"></script>

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
 
function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}
 
var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object

function initMap() {
	if (document.myForm.mode.checked) {
		if (xmlhttp) {
			//get from myFrom
			var str = "query?mode=init";
			xmlhttp.open("POST",str,true);
			xmlhttp.onreadystatechange = handleMapResponse;
			xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		    xmlhttp.send(null);
		}	
	}
}

function ajaxLoadMap() {
	if (document.myForm.queryStr.value == '') {
		alert("Please enter a search term.")
	}
	else if (!document.myForm.services[0].checked && !document.myForm.services[1].checked) {
		alert("Please select at least one site to search.")
	}
	else if (xmlhttp) {
		$('#wholePage').mask("Loading...");
		
		 document.getElementById("resultList").innerHTML="";
		
		//get from myFrom
		var str = "query?queryStr="+document.myForm.queryStr.value;
		if (document.myForm.mode.checked)
			str+="&mode=map";
		str+= "&services=";
		if (document.myForm.services[0].checked)
			str+="twitter&services=";
		if (document.myForm.services[1].checked)
			str+="flickr";
		xmlhttp.open("POST",str,true);
		xmlhttp.onreadystatechange = handleMapResponse;
		xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	    xmlhttp.send(null);
	}
} 

function handleMapResponse() {
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) {
		       
		       //display map
		       if (document.myForm.mode.checked) {
		    	   document.getElementById("map_canvas").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
			       $('#map_canvas').height("480px");
			       $('#map_canvas').width($(window).width()-10);
			       var ob = document.getElementsByTagName("script");
			       for(var i=0; i<ob.length-1; i++){
			       		if(ob[i+1].text!=null) eval(ob[i+1].text);
			       }
			       $('#wholePage').unmask();
		       }
		       else {
		    	   document.getElementById("map_canvas").innerHTML="";
		    	  $('#map_canvas').height(0);
		    	  $('#map_canvas').width(0);
		    	   document.getElementById("resultList").innerHTML=xmlhttp.responseText;
		    	   $('#wholePage').unmask();
		       }
		}
	     else {
	        alert("Error during AJAX call. Please try again");
	     }
	}
}

</script>

</head>

<body onload="initMap()" >

<div id="wholePage">

	<form name="myForm">
		<!-- 2010-11-16 bal changed search box to text box instead of text area 
			  changed format of form to table (saving space) -->
		<table align=center>
			<tr style="valign:top">
				<td colspan=2 align=center><img src="images/banner.png"><br /> Hello! Enter your search term: <br />
					<input type="text" name="queryStr" size=80 onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();return false;}};">
					<input id="btnSearch" type="button" value="Search" onClick="javascript:ajaxLoadMap()"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="services" value="twitter" checked="checked" /> Search Twitter<br />
					<input type="checkbox" name="services" value="flickr" checked="checked" /> Search Flickr <br />
					<input type="checkbox" name="mode" value="map" checked="checked" /> Display on Map <br />
				</td>
				<td></td>
			</tr>
		</table>
	</form>

	<div id="map_canvas" style="width:100pc; height:480px"></div>
	<div id="resultList"></div>
</div>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7400466-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>  
</body>
</html>